<template>
  <div class="home">
    <!-- 头部数据模块 -->
    <div class="modeling">
      <el-row type="flex" justify="space-around" align="middle">
        <el-col :span="4">
          <div class="grid-content bg-purple" @click="skip(0)">
            <span class="icon_img icon_img_one">
              <i class="el-icon-medal-1"></i>
            </span>
            <div class="text">
              <span class="text_title">今日会员</span>
              <span class="text_number">{{ datas.totaymember }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple" @click="skip(1)">
            <span class="icon_img icon_img_two">
              <i class="el-icon-tickets"></i>
            </span>
            <div class="text">
              <span class="text_title">今日订单</span>
              <span class="text_number">{{ datas.totayorder }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple" @click="skip(2)">
            <span class="icon_img icon_img_three">
              <i class="el-icon-money"></i>
            </span>
            <div class="text">
              <span class="text_title">今日订单额</span>
              <span class="text_number">{{ datas.totaymoney }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple" @click="skip(3)">
            <span class="icon_img icon_img_four">
              <i class="el-icon-trophy-1"></i>
            </span>
            <div class="text">
              <span class="text_title">总会员</span>
              <span class="text_number">{{ datas.allmember }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple" @click="skip(4)">
            <span class="icon_img icon_img_five">
              <i class="el-icon-user"></i>
            </span>
            <div class="text">
              <span class="text_title">直播用户</span>
              <span class="text_number">{{ datas.allanchor }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple" @click="skip(5)">
            <span class="icon_img icon_img_six">
              <i class="el-icon-discover"></i>
            </span>
            <div class="text">
              <span class="text_title">总课程</span>
              <span class="text_number">{{ datas.allcourse }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 折线图 -->
    <div id="broken"></div>
    <!-- 柱形统计图 -->
    <div class="cylindricality">
      <!-- 左图 -->
      <div id="left_cylindricality"></div>
      <!-- 右图 -->
      <div id="right_cylindricality"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clientWidth: "", //监听页面的宽度
      datas: {} //首页总数据
    };
  },
  components: {},
  mounted() {
    var echarts = require("echarts");
    // // 绘制折线图表
    var myChart = echarts.init(document.getElementById("broken")); //折线图
    var column_last = echarts.init(
      document.getElementById("left_cylindricality")
    ); //上周柱形对比图
    var column_next = echarts.init(
      document.getElementById("right_cylindricality")
    ); //本周对比图
    myChart.setOption({
      title: {
        text: "课程交易统计(7天)",
        x: "5%"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985"
          }
        }
      },
      legend: {
        // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: "5%",
        right: "4%",
        bottom: "1%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: []
    });
    //加载数据的动画
    myChart.showLoading();
    // 折线图数据加载模块
    //此处获取并加载数据
    setTimeout(() => {
      let legend_data = ["订单数量", "订单金额"];
      let x_data = this.datas.sevenkorder.price_key;
      let series_data = [
        {
          name: "订单数量",
          type: "line",
          stack: "总量",
          areaStyle: {},
          data: this.datas.sevenkorder.count_value
        },
        {
          name: "订单金额",
          type: "line",
          stack: "总量",
          areaStyle: {},
          data: this.datas.sevenkorder.money_value
        }
      ];
      //数据加载到图标中
      myChart.setOption({
        legend: {
          data: legend_data
        },
        xAxis: {
          data: x_data
        },
        series: series_data
      });
      //折线图自适应配置
      window.onresize = () => {
        //因为echart自适应影响全局，所以在此处监听页面宽度变化
        if (this.$route.path == "/manage") {
          myChart.resize();
          column_next.resize();
          column_last.resize();
          this.clientWidth = document.body.clientWidth;
          this.$store.commit("Gwidth", this.clientWidth);
        } else {
          this.clientWidth = document.body.clientWidth;
          this.$store.commit("Gwidth", this.clientWidth);
        }
      };
      myChart.hideLoading(); //隐藏加载动画
    }, 1000);
    // 左柱形图
    column_last.setOption({
      title: {
        text: "上月课程数据图"
      },
      tooltip: {
        trigger: "axis"
      },
      legend: {},
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar"] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: "category"
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: []
    });
    column_last.showLoading();
    setTimeout(() => {
      let legend_data = ["免费课程", "收费课程"];
      let x_data = [];
      for (let i = 0; i < this.datas.lastmonth.chargecourse.length; i++) {
        let src = "第" + parseInt(i + 1) + "条";
        x_data.push(src);
      }
      let s_d_one = []; //免费课程数据
      this.datas.lastmonth.freecourse.forEach(e => {
        s_d_one.push(e.count);
      });
      let s_d_two = []; //收费课程数据
      this.datas.lastmonth.chargecourse.forEach(e => {
        s_d_two.push(e.count);
      });
      let series_data = [
        {
          name: "免费课程",
          type: "bar", // 添加该属性
          data: s_d_one,
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }]
          }
        },
        {
          name: "收费课程",
          type: "bar", // 添加该属性
          data: s_d_two,
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }]
          }
        }
      ];
      //数据加载到图标中
      column_last.setOption({
        legend: {
          data: legend_data
        },
        xAxis: {
          data: x_data
        },
        series: series_data
      });

      column_last.hideLoading(); //隐藏加载动画
    }, 1000);
    // 右柱形图
    column_next.setOption({
      title: {
        text: "本月课程数据图"
      },
      tooltip: {
        trigger: "axis"
      },
      legend: {},
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar"] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: "category"
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: []
    });
    column_next.showLoading();
    setTimeout(() => {
      let legend_data = ["免费课程", "收费课程"];
      let x_data = [];
      for (let i = 0; i < this.datas.thismonth.topfreecourse.length; i++) {
        let src = this.datas.thismonth.topfreecourse[i].course_name;
        x_data.push(src);
      }
      let s_d_one = []; //免费课程数据
      this.datas.thismonth.topfreecourse.forEach(e => {
        s_d_one.push(e.count);
      });
      let s_d_two = []; //收费课程数据
      this.datas.thismonth.chargecourse.forEach(e => {
        s_d_one.push(e.count);
      });
      let series_data = [
        {
          name: "免费课程",
          type: "bar", // 添加该属性
          data: s_d_one,
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }]
          }
        },
        {
          name: "收费课程",
          type: "bar", // 添加该属性
          data: s_d_two,
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }]
          }
        }
      ];
      //数据加载到图标中
      column_next.setOption({
        legend: {
          data: legend_data
        },
        xAxis: {
          data: x_data
        },
        series: series_data
      });

      column_next.hideLoading(); //隐藏加载动画
    }, 1000);
  },
  computed: {},
  created() {
    // console.log(this.publick.token());
    this.$api
      .Main({
        token: this.publick.token()
        // token: "ef8ea70cef760589cf27968ee20e638e"
      })
      .then(res => {
        console.log(res);
        this.datas = res.data;
      })
      .catch(res => {
        console.log(res);
      });
  },
  methods: {
    // 点击模块跳转
    skip(e) {
      if (e == 0 || e == 3) {
        this.$router.push("/viplist");
      } else if (e == 4) {
        this.$router.push({
          path: "/viplist",
          query: {
            skip_live: "Live" //点击判断直播用户
          }
        });
      } else if (e == 1 || e == 2) {
        this.$router.push("/orderlist");
      } else if (e == 5) {
        this.$router.push("/course_list");
      }
    }
  }
};
</script>

<style scoped>
.home {
  background: #eff2f7;
  height: 89vh;
  overflow: auto;
}
#broken {
  width: 97.5%;
  height: 30vh;
  margin: auto;
  margin-top: 5vh;
  padding-top: 5vh;
  /* margin-left: 10%; */
  background: #fff;
}
.grid-content {
  height: 108px;
  width: 90%;
  margin: auto;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
.modeling {
  padding-top: 5vh;
}
.bg-purple {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon_img {
  display: flex;
  width: 70px;
  height: 70px;
  /* background: chartreuse; */
  margin-left: 3%;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  margin-right: 5%;
}
.icon_img i {
  font-size: 45px;
}
.icon_img_one i {
  color: #40c9c6;
}
.icon_img_two i {
  color: #36a3f7;
}
.icon_img_three i {
  color: #ff6600;
}
.icon_img_four i {
  color: #cc0000;
}
.icon_img_five i {
  color: #009966;
}
.icon_img_six i {
  color: #00cc00;
}
.text_title {
  display: block;
  min-width: 30%;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
}
.text_number {
  display: block;
  min-width: 30%;
  margin-top: 1vh;
  font-size: 20px;
  font-weight: 700;
}
.bg-purple:hover .icon_img_one {
  background: #40c9c6;
}
.bg-purple:hover .icon_img_two {
  background: #36a3f7;
}
.bg-purple:hover .icon_img_three {
  background: #ff6600;
}
.bg-purple:hover .icon_img_four {
  background: #cc0000;
}
.bg-purple:hover .icon_img_five {
  background: #009966;
}
.bg-purple:hover .icon_img_six {
  background: #00cc00;
}
.bg-purple:hover .icon_img i {
  /* background: chartreuse;
   */
  color: #fff;
}
.cylindricality {
  width: 100%;
  height: 30vh;
  display: flex;
  justify-content: space-around;
  margin-top: 5vh;
}
#left_cylindricality {
  width: 45%;
  height: 30vh;
  background: #fff;
}
#right_cylindricality {
  width: 45%;
  height: 30vh;
  background: #fff;
}
</style>
